// JS 面向对象的方式
// 通过this 关键字可以绑定属性
// 原型链 比较难懂

// 相当于python的类或者构造函数 相当于初始化方法
function Banner() {
    console.log("init");
    // 此刻的this 相当于 Banner对象
    this.person = "Pyma"
}
// 原型链
Banner.prototype.greet = function (word) {
    console.log("hello",word)
}

var banner = new Banner();
// banner 可以调用 person
console.log(banner.person)
console.log(banner.greet("马原"))

// 面向对象方式 初始化构造函数
function Banner() {
    this.bannerWidth = 798;
    this.bannerGroup = $("#banner-group");
    // index为1 等待会正常 else index++  从 1开始+
    this.index = 1;
    this.leftArrow = $(".left-arrow");
    this.rightArrow = $(".right-arrow");
    // 获取轮播图的个数
    this.bannerUl = $("#banner-ul");
    this.liList = this.bannerUl.children("li")
    this.bannerCount = this.liList.length;
    this.pageControl = $(".page-control");

}

// 轮播图图片
Banner.prototype.initBanner = function(){
    var self = this;
    var firstBanner = self.liList.eq(0).clone();
    var lastBanner = self.liList.eq(self.bannerCount-1).clone();
    self.bannerUl.append(firstBanner);
    self.bannerUl.prepend(lastBanner);
    self.bannerUl.css({"width":self.bannerWidth * (self.bannerCount + 2), "left":-self.bannerWidth});


};
// 轮播图 动态小圆点
Banner.prototype.initPageControl = function(){
    var self = this;
    for(var i=0; i<self.bannerCount; i++){
        var circle = $("<li></li>");
        self.pageControl.append(circle);
        if( i === 0){
            circle.addClass("active");
        }
    }
    self.pageControl.css({"width":self.bannerCount*12 + 8*2*(self.bannerCount-1) + 8*2})
};

Banner.prototype.toggleArrow = function(isShow){
    var self = this;
    if(isShow){
        self.leftArrow.show();
        self.rightArrow.show();
    }else{
        self.leftArrow.hide();
        self.rightArrow.hide();
    }
};

// 轮播图 动画事件
Banner.prototype.animate = function(){
    var self = this;
    // 动画叠加 轮播图动画速度过快 先把之前的停掉，再继续就不快le  .stop()
    self.bannerUl.stop().animate({"left": -798*self.index}, 500);
    // | 轮播图下标           | 小点点下标           |
    // | 0                    | self.bannerCount - 1 |
    // | 1                    | 0                    |
    // | 2                    | 1                    |
    // | ...index             | index -1             |
    // | self.bannerCount + 1 | 0                    |
    var index = self.index;
    // console.log("传进来的是"+index)

    if(index === 0){
        index = self.bannerCount - 1;
    }else if(index === self.bannerCount + 1){
        index = 0;
    }else{
        index = self.index - 1;
    }
    // console.log("经过判断的是"+index)
    // 选中的li元素 添加class属性 其他兄弟元素去除class属性
    self.pageControl.children("li").eq(index).addClass("active").siblings().removeClass("active");
};


// 启动轮播图
Banner.prototype.loop = function(){
    var self = this;
    // css 是瞬间就位 体验感不好
    // bannerUI.css({"left": -798});
    this.timer = setInterval(function(){
        // self.bannerCount+1 由于self.bannerCount 是保留的初始值， 所以这里+1
        if(self.index >= self.bannerCount+1){
            // 回到索引为1的是第一张
            self.bannerUl.css({"left":-self.bannerWidth});
            // 此时index 应为2
            self.index = 2;
        }else{
            self.index++;
        }

        // 动画效果
        self.animate();
    },2000);
};

Banner.prototype.listenArrowClick = function(){
    var self = this;
    // 左边点击上下切换
    self.leftArrow.click(function () {
        if(self.index === 0){
            self.bannerUl.css({"left":-self.bannerCount*self.bannerWidth});
            self.index = self.bannerCount - 1;
        }else{
            self.index--;
        }
        self.animate()

    });
    // 右边点击上下切换
    self.rightArrow.click(function () {
        if(self.index === self.bannerCount + 1){
            self.bannerUl.css({"left":-self.bannerWidth});
            self.index = 2;
        }else{
            self.index++;
        }
        self.animate()
    });
};

// 轮播去hover事件
Banner.prototype.listenBannerHover = function(){
    var self = this;
    this.bannerGroup.hover(function(){
        // 鼠标移动到这里悬停
        clearInterval(self.timer);
        self.toggleArrow(true);
    },function(){
        // 鼠标移走时解除悬停
        self.loop();
        self.toggleArrow(false);
    });
};

// 轮播图小圆点监听事件
Banner.prototype.listenPageControl = function(){
    var self = this;
    // each获取所有的li元素并遍历
    // index  li 的下标 obj li元素
    self.pageControl.children("li").each(function (index, obj) {
        $(obj).click(function () {
            self.index = index+1;
            // console.log("我点记得是2"+self.index)
            // console.log("我点记得是1"+index)
            self.animate();
            // 选中的li元素 添加class属性 其他兄弟元素去除class属性
            // $(obj).addClass("active").siblings().removeClass("active");

        });
    });
};


// 通过prototype添加方法
Banner.prototype.run = function () {
    this.initBanner();
    this.initPageControl();
    this.loop();
    this.listenBannerHover();
    this.listenArrowClick();
    this.listenPageControl();

};


function Index(){
    var self = this;
    self.category_id = 0;
    self.page = 2;
    self.loadBtn = $("#load-more-btn")
    // console.log("index....................")

};

Index.prototype.listenLoadMoreEvent = function(){
   var self = this;
   var loadBtn = $("#load-more-btn");
   loadBtn.click(function () {
       console.log("click........................")
       xfzajax.get({
           'url':'/news/list/',
           'data':{
               'p':self.page,
               'category_id':self.category_id
           },
           'success':function (result) {
               if(result['code'] === 200){
                   // console.log(result['data'])
                   var newses = result['data'];
                   if(newses.length > 0){
                       var tpl = template("news-item",{"newses":newses});
                       var ul = $(".list-inner-group");
                       ul.append(tpl);
                       self.page += 1;
                   }else{
                       loadBtn.hide();
                   }
               }
           }
       })
   })
};


Index.prototype.listenCategorySwitchEvent = function(){
    var self = this;
    var tabGroup = $(".list-tab");
    tabGroup.children().click(function () {
        // this 代表当前选中的这个li标签
        var li = $(this);
        var category_id = li.attr("data-category");
        var page = 1;
        xfzajax.get({
            'url': '/news/list/',
            'data': {
                'category_id':category_id,
                'p':page
            },
            'success':function (result) {
                if(result['code'] === 200){
                    var newses = result['data'];
                    var tpl = template("news-item", {"newses":newses});
                    // empty 可以将这个标签下的所有子元素都删掉
                    var newsListGroup = $(".list-inner-group");
                    newsListGroup.empty();
                    newsListGroup.append(tpl);
                    self.page = 2;
                    self.category_id = category_id;
                    li.addClass('active').siblings().removeClass('active');
                    self.loadBtn.show();
                }
            }
        })
    })
};

Index.prototype.run = function(){
    var self = this;
    self.listenLoadMoreEvent();
    self.listenCategorySwitchEvent();
};



// 保证你页面元素都加载完毕以后再执行JS
$(function () {
    var banner = new Banner();
    banner.run();

    var index = new Index();
    index.run();
})


